<template>
  <div class="login">
    <img class="icon_back_left" src="../../assets/img/login/ic_back_left.png" alt="" @click="$router.back()">
    <div class="login_bg">
      <div 
        class="login_box"
        :style="{height: currentIndex === 0 ? '8.88rem':'13.706667rem'}">
        <login-tab-control @login-switch="loginSwitch"/>
        <login-content v-if="currentIndex === 0"/>
        <login-register v-else/>
      </div>
    </div>
  </div>
</template>

<script>
import LoginContent from './childComps/LoginContent.vue'
import LoginRegister from './childComps/LoginRegister.vue'
import LoginTabControl from './childComps/LoginTabControl.vue'
export default {
  components: { LoginTabControl, LoginContent, LoginRegister },
  name: 'Login',
  data() {
    return {
      currentIndex: 0,
    }
  },
  methods: {
    loginSwitch(i) {
      this.currentIndex = i
    }
  },
}
</script>

<style lang="less" scoped>
.icon_back_left {
  position: absolute;
  top: .293333rem;
  left: .426667rem;
  display: block;
  width: .586667rem;
  height: .586667rem;
}

.login {
  width: 10rem;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  overflow: auto;
}

.login::-webkit-scrollbar {
  display: none;
}
.login_bg {
  box-sizing: border-box;
  width: 10rem;
  height: 4.026667rem;
  background: linear-gradient(0deg, #FF5543, #FF9600);
}

.login_box {
  position: absolute;
  top: 1.466667rem;
  left: 50%;
  transform: translateX(-50%);
  width: 9.146667rem;
  border-radius: .266667rem;
  background: #fff;
}
</style>